<template>
  <div class="main coupon-list">
    <!-- 搜索 -->
    <div class="filter-container">
      <el-input @keyup.enter.native="search" class="filter-item" placeholder="按组合名称搜索" v-model="params.name" clearable></el-input>
      <el-input @keyup.enter.native="search" class="filter-item" placeholder="组合ID" v-model="params.comboId" clearable></el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <router-link v-if="rightsButtons['add']" :to="{name: 'combinationAdd'}" class="filter-item fr">
        <el-button type="success">新建组合</el-button>
      </router-link>
    </div>
    <!--end-->
    <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
      <el-table-column align="center" label="组合ID" prop="comboId"></el-table-column>
      <el-table-column align="center" label="组合名称">
        <template slot-scope="scope">
          <a
            style="color: #409eff"
            target="_blank"
            :href="getUrl({id: scope.row.comboId, fromType: 201, goodsType: 4, activityId: '', packType: ''})"
          >{{scope.row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否上架" width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.upshelf"
            @change="updateStatus(scope.row, 'upShelf')"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            :disabled="!rightsButtons['operate']">
          </el-switch>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="是否售卖" width="120">-->
        <!--<template slot-scope="scope">-->
          <!--<el-switch-->
            <!--v-model="scope.row.isSell"-->
            <!--@change="updateStatus(scope.row, 'isSell')"-->
            <!--active-color="#13ce66"-->
            <!--inactive-color="#ff4949"-->
            <!--active-text="是"-->
            <!--inactive-text="否"-->
            <!--:active-value="1"-->
            <!--:inactive-value="0">-->
          <!--</el-switch>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column align="center" label="操作" v-if="rightsButtons['view'] || rightsButtons['edit']">
        <template slot-scope="scope">
          <router-link v-if="rightsButtons['view']" :to="{name: 'combinationView', params: {id: scope.row.comboId}, query: {pageType: 'view'}}">
            <el-button type="primary" plain size="mini">查看</el-button>
          </router-link>
          <router-link v-if="!scope.row.upshelf && rightsButtons['edit']" :to="{name: 'combinationEdit', params: {id: scope.row.comboId}}">
            <el-button type="primary" size="mini" @click="toEdit(scope.row)">编辑</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!--page-->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="params.pageIndex"
      :page-size="params.pageSize"
      background
      layout="total, prev, pager, next, jumper"
      :total="listTotal">
    </el-pagination>

  </div>
</template>

<script>
  export default {
    name: "combination",
    data() {
      return {
        params: {
          pageIndex: 1,
          PageSize: 10,
        },
        list: [],
        listTotal: 0,
        listLoading: false,
      }
    },
    created() {
      this.initList()
    },
    methods: {
      initList() {
        this.request({
          url: '/bsnl-product/combo/package/list',
          method: 'get',
          params: this.params
        }).then(res => {
          this.list = res.data || []
          this.listTotal = res.totalCount
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
      },

      // 更新状态
      updateStatus(item, type) {
        let api, url = '/bsnl-product/combo/package/'
        let typeVal = type ==='upShelf'
        api = typeVal? url + 'upshelf' : url + 'issell'
        const param = {
          comboId: item.comboId,
          status: typeVal ? item.upshelf : item.isSell
        }
        this.request({ url: api, method: 'post', data: param }).then(res => {
          this.$message({ type: 'success', message: res.message || res.msg })
        }).catch(e => {
          this.$message({ type: 'error', message: e})
        })
      },

      search() {
        this.params.pageIndex = 1
        console.log('this.params', this.params)
        this.initList()
      },

      handleCurrentChange(val) {
        this.params.pageIndex = val
        this.initList()
      },

      toEdit(val) {
        console.log(val)
      }
    }
  }
</script>

<style scoped>

</style>
